<template>
  <div class="cash-benefits">
    <div class="content">
      <p class="sub1">GET FREE CASH</p>
      <p class="sub2">UP TO</p>
      <p class="sub3">₱100,000</p>
      <img class="btn" @click="returnTo" src="~@/assets/imgs/market/cash_benefits_btn.png" alt="" />
    </div>
    <div class="scroll-text">
      <ul class="scroll-text-swipe" ref="swipe" :class="{ anim: animate === true}">
        <li :style="{ height: itemHeigth + 'px' }" v-for="(item, index) in swipeDataContainer" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CashBenefitsStart',
  data () {
    return {
      swipeData: [
        '2 min ago 093****6858 withdraw 100,000 pesos',
        '3 min ago 099****9780 withdraw 26,000 pesos',
        '5 min ago 096****6761 withdraw 30,000 pesos',
        '6 min ago 096****8015 withdraw 70,000 pesos',
        '8 min ago 091****1066 withdraw 100,000 pesos',
        '11 min ago 091****0140 withdraw 8,000 pesos',
        '15 min ago 095****9270 withdraw 15,000 pesos',
        '16 min ago 092****1175 withdraw 50,000 pesos',
        '19 min ago 099****4618 withdraw 100,000 pesos',
        '20 min ago 094****1834 withdraw 26,000 pesos',
        '24 min ago 096****8267 withdraw 90,000 pesos',
        '28 min ago 091****2803 withdraw 48,000 pesos'
      ],
      swipeDataContainer: [],
      timer: null,
      animate: false,
      itemHeigth: 0
    }
  },
  created () {
    this.swipeDataContainer = this.swipeData.concat([])
  },
  watch: {
    animate(flag) {
        const wrap = this.$refs.swipe
        if (flag) {
          wrap.style.marginTop = `-${ this.itemHeigth }px`
        } else {
          wrap.style.marginTop = 0
        }
    },
  },
  methods : {
    returnTo () {
      this.$hybrid.action('ee', {
        content: 'home_banner_click'
      })
      this.$emit('checkStep')
    }
  },
  mounted () {
    this.itemHeigth = this.$refs.swipe.offsetHeight / 4
    this.timer = setInterval(()=> {
      this.animate = true
      setTimeout(() => {
        this.swipeDataContainer.push(this.swipeDataContainer[0])
        this.swipeDataContainer.shift()
        this.animate = false
      }, 400)
    }, 800)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang='scss'>
@import './index.scss';
</style>